<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0056)http://iamgreen.cn/examples/css3%20icon/css%20graph.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>css graph</title>
<style type="text/css" media="screen">
/*正方形*/
#square {
	width: 100px;
	height: 100px;
	background: #0eaf76;
}
/*长方形*/
#rectangle {
	width: 200px;
	height: 100px;
	background: #0eaf76;
}
/*圆形*/
#circle {
	width: 100px;
	height: 100px;
	background: #0eaf76;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
/*椭圆形*/
#oval {
	width: 200px;
	height: 100px;
	background: #0eaf76;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}
/*三角形（向上）*/
#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #0eaf76;
}
/*三角形（向下）*/
#triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #0eaf76;
}
/*三角形（向左）*/
#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid #0eaf76;
	border-bottom: 50px solid transparent;
}
/*三角形（向右）*/
#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid #0eaf76;
	border-bottom: 50px solid transparent;
}
/*三角形（左上）*/
#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid #0eaf76; 
	border-right: 100px solid transparent;			
}
/*三角形（右上）*/
#triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid #0eaf76; 
	border-left: 100px solid transparent;
}
/*三角形（左下）*/
#triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid #0eaf76; 
	border-right: 100px solid transparent;	
}
/*三角形（右下）*/
#triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid #0eaf76; 
	border-left: 100px solid transparent;
}	
/*平行四边行*/			
#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: #0eaf76;
}
/*梯形*/
#trapezoid {
	border-bottom: 100px solid #0eaf76;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;
}
/*六角星形*/
#star-six {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #0eaf76;
	position: relative;
        margin: 20px 0px 50px 20px;
}
#star-six:after {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #0eaf76;
	position: absolute;
	content: "";
	top: 30px;
	left: -50px;
}
/*五角星形*/
#star-five {
   margin: 80px 0;
   position: relative;
   display: block;
   color: #0eaf76;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid #0eaf76;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid #0eaf76;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
}
#star-five:after {
   position: absolute;
   display: block;
   color: #0eaf76;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #0eaf76;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}
/*五边形*/
#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #0eaf76 transparent;
    margin: 50px 0px 20px 20px;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #0eaf76;
}
/*六边形*/
#hexagon {
	width: 100px;
	height: 55px;
	background: #0eaf76;
	position: relative;
        margin: 50px 0px 50px 20px;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid #0eaf76;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid #0eaf76;
}
/*八边形*/
#octagon {
	width: 100px;
	height: 100px;
	background: #0eaf76;
	position: relative;
}
#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid #0eaf76;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}
#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-top: 29px solid #0eaf76;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}
/*心形*/
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #0eaf76;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
/*无穷大*/
#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid #0eaf76;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
/*菱形*/
#diamond {
   width: 80px; 
   height: 80px; 
   background: #0eaf76;
   margin: 50px 20px 20px 60px;
   -webkit-transform: rotate(-45deg);
   -moz-transform:    rotate(-45deg);
   -ms-transform:     rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
/*鸡蛋*/
#egg {
   display:block;
   width: 126px; 
   height: 180px;
   background-color: #0eaf76;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;
}
/*吃豆人*/
#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid #0eaf76;
  border-left: 60px solid #0eaf76;
  border-bottom: 60px solid #0eaf76;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
/*说话泡泡*/
#talkbubble {
   width: 120px; 
   height: 80px; 
   background: #0eaf76;
   position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #0eaf76;
   border-bottom: 13px solid transparent;
}
/*12星形*/
#burst-12 {
    background: #0eaf76;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: #0eaf76;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}
/*8星形*/
#burst-8 {
    background: #0eaf76;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: #0eaf76;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

</style>
<meta name="chromesniffer" id="chromesniffer_meta" content="{}"><script type="text/javascript" src="chrome-extension://fhhdlnnepfjhlhilgmeepgkhjmhhhjkh/js/detector.js"></script></head>

<body>
<span style="font-size:27px;">CSS graph</span>
<br><br><br>
<div id="square"></div>正方形<br>
<div id="rectangle"></div>长方形<br>
<div id="circle"></div>圆形<br>
<div id="oval"></div>椭圆形<br>
<div id="triangle-up"></div>三角形（向上）<br>
<div id="triangle-down"></div>三角形（向下）<br>
<div id="triangle-left"></div>三角形（向左）<br>
<div id="triangle-right"></div>三角形（向右）<br>
<div id="triangle-topleft"></div>三角形（左上）<br>
<div id="triangle-topright"></div>三角形（右上）<br>
<div id="triangle-bottomleft"></div>三角形（左下）<br>
<div id="triangle-bottomright"></div>三角形（右下）<br>
<div id="parallelogram"></div>平行四边行<br>
<div id="trapezoid"></div>梯形<br>
<div id="star-six"></div>六角星形<br>
<div id="star-five"></div>五角星形<br>
<div id="pentagon"></div>五边形<br>
<div id="hexagon"></div>六边形<br>
<div id="octagon"></div>八边形<br>
<div id="heart"></div>心形<br>
<div id="infinity"></div>无穷大<br>
<div id="diamond"></div>菱形<br>
<div id="egg"></div>鸡蛋<br>
<div id="pacman"></div>吃豆人<br><br>
<div id="talkbubble"></div><br><br>说话泡泡<br><br>
<div id="burst-12"></div><br><br>12星形<br><br>
<div id="burst-8"></div><br><br>8星形<br><br>
<span style="margin-left:500px;">by lc</span>


</body></html>